<template>
    <form class="row row-cols-lg-auto g-3 align-items-center" id="projectImagesForm" @submit.prevent="sumbitform">

        <div class="input-group col-12">
            <input class="form-control" type="file" id="cardImage" @change="onUploadCardImage" name="cardImage"
                accept="image/png, image/jpeg" />
        </div>

        <div class="input-group col-12">
            <input class="form-control" type="file" id="sliderImages" @change="onUploadSliderImages" name="sliderImages"
                accept="image/png, image/jpeg" multiple />
        </div>

        <div v-if="errors.length">
            <b>Возникли следующие ошибки:</b>
            <ul>
                <li v-for="error in errors">{{ error }}</li>
            </ul>
        </div>

        <div class="col-12">
            <input class="btn btn-sm btn-outline-success" type="submit" value="Отправить" />
        </div>

    </form>
</template>

<script>
export default {
    data() {
        return {
            errors: [],
        };
    },
    props: {
        images: {
            type: Object,
            required: true,
        },
    },
    methods: {
        sumbitform() {
            this.falidateForm();
            if (this.errors.length === 0)
                this.$emit('sumbitform', this.images);
        },
        falidateForm() {
            // проверка валидации
        },
        onUploadCardImage(event) {
            this.images.card = event.target.files[0];
        },
        onUploadSliderImages(event) {
            this.images.slider = event.target.files;
        }
    },
}
</script>

<style lang="scss" scoped></style>